<!--
 * @Description: useDebounceFn(防抖函数)
 * @Author: r_yuesheng
 * @Date: 2022-12-23 16:34:55
 * @LastEditTime: 2022-12-30 13:07:36
 * @LastEditors: r_yuesheng
-->
<template>
  <div>
    <el-button @click="clickedFn">点击我</el-button>
    <div>已点击次数：{{clickValue}}</div>
    <div>防抖次数：{{debounceValue}}</div>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue';
import { useDebounceFn } from '@vueuse/core';
export default {
  name: '',
  props: {},
  components: {},
  setup(props, { emit }) {
    function initState() {
      return {
        clickValue: 0,
        debounceValue: 0,
      };
    }
    const state = reactive(initState());
    function clickedFn() {
      state.clickValue += 1;
      debouncedFn();
    }
    // maxWait 如果由于重复输入而在5000ms之后没有调用，无论如何都会调用该函数。
    const debouncedFn = useDebounceFn(
      () => {
        state.debounceValue += 1;
      },
      1000,
      { maxWait: 5000 }
    );
    return {
      ...toRefs(state),
      clickedFn,
    };
  },
};
</script>